import useData from '@/utils/vatio';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { history, useDispatch, useSelector } from '@umijs/max';
import { Button, Menu } from 'antd';
// import logo from '@/assets/logo.png'
const Index = (props: { menuData: any; initialState: any }) => {
  const { menuData, initialState } = props || {};

  const { setUserInfo } = useData();
  console.log(initialState, 'initialState');
  if (initialState?.currentUser) {
    setUserInfo(initialState.currentUser);
  }

  const collapsed = useSelector((state: any) => state.global.collapsed);
  const dispatch = useDispatch();
  const handleMenuClick = (e) => {
    history.push(e.key);
  };

  const toggleCollapsed = () => {
    dispatch({
      type: 'global/changeLayoutCollapsed',
      payload: !collapsed,
    });
  };

  return (
    <>
      <div
        style={{
          overflow: 'hidden',
          flex: '0 0 ' + `${collapsed ? 80 : 256}` + 'px',
          transition:
            'background-color 0.3s ease 0s, min-width 0.3s ease 0s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s ,flex 0.4s ease 0s',
        }}
      />
      <div
        style={{
          // width: '0 0 ' + 256 + 'px',
          overflow: 'hidden',
          // flex: '0 0 ' + 256 + 'px',
          borderRight: '1px solid #e8e8e8',
          boxSizing: 'border-box',
          backgroundColor: '#fff',
          position: 'fixed',
          top: 0,
          bottom: 0,
          left: 0,
          zIndex: 20,
          width: collapsed ? 80 : 256,
        }}
      >
        <div style={{ marginTop: 56 }}>
          <Menu
            mode="inline"
            inlineCollapsed={collapsed}
            theme="light"
            onClick={(e) => handleMenuClick(e)}
            items={menuData.map((item) => {
              const { pro_layout_parentKeys, ...rest } = item;
              console.log(pro_layout_parentKeys, 'item');
              return {
                ...rest,
                unaccessible: item.unaccessible ? 'true' : 'false',
                locale: item.locale ? 'true' : 'false',
              };
            })}
          />
        </div>
        <Button
          type="text"
          onClick={toggleCollapsed}
          style={{
            position: 'absolute',
            bottom: 20,
            left: 20,
          }}
        >
          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </Button>
      </div>
    </>
  );
};

export default Index;
